<template>
  <div>
    <filmswiper :key="dataList.length" ref="filmswiper">
      <div class="swiper-slide" v-for="data in dataList" :key="data.bannerId">
        <img :src="data.imgUrl"/>
      </div>
    </filmswiper>
    <film-nav :class="isFixed ? 'fixed' : ''"></film-nav>
    <div>
      <!--路由容器-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import filmNav from '@/views/Film/FilmNav'
import filmswiper from '@/views/Film/FilmSwiper'
import axios from 'axios'
import { Indicator } from 'mint-ui'

export default {
  name: 'Film',
  data () {
    return {
      dataList: [],
      isFixed: false
    }
  },
  components: {
    filmswiper,
    filmNav
  },
  mounted () {
    // 开启loading
    Indicator.open({
      text: '加载中...',
      spinnerType: 'fading-circle'
    })
    axios({
      url: 'https://m.maizuo.com/gateway?type=2&cityId=440300&k=2040388',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16318468911969714951618561"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      console.log(res.data)
      this.dataList = res.data.data
      // 关闭loading
      Indicator.close()
    })
    window.onscroll = this.handleScroll
  },
  methods: {
    handleScroll () {
      // console.log(document.documentElement.scrollTop)
      // console.log(this.$refs.filmswiper.$el)// 该组件对应的dom节点
      // console.log(this.$refs.filmswiper.$el.offsetHeight)
      if (document.documentElement.scrollTop > this.$refs.filmswiper.$el.offsetHeight) {
        // console.log('fixed')
        this.isFixed = true
      } else {
        // console.log('unfixed')
        this.isFixed = false
      }
    }
  },
  destroyed () {
    window.onscroll = null
  }
}
</script>

<style scoped>

</style>
